<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.box {
	width: 1000px;
	height: 140px;
	background: red;
}
.list {
	margin: 0;
	padding: 0;
	/*circle空心圆   disc 默认=缺省    square方的   */
	list-style-type: square;
	/*去切图  ps 里面 使用选框选取我们需要的部分  ctrl+c ctrl+n ctrl+v ctrl+s 保存为一张图片*/
	/*ctrl+ -   ctrl+ +  在ps里面 放大缩小图片 */
	/*ctrl+d 取消选择*/
	/*把图片作为列表的点点*/
	list-style-image: url(../images/img_01.png);
	/*位置 改变样式的位置*/
	list-style-position: outside;
}
.box1{
	width:400px;height:400px;background:#6C9;
	/*border 边 */
	border-top-width:50px;
	border-top-color:red;
	border-top-style:ridge;
	/* solid 颜色块的效果 dotted点的效果 dashed虚线 double 双线 groov有层次两个色块,类似相框效果  ridge跟groove反着来的   */
	/*border-top: red solid 5px;*/
	
	border-right-color:yellow;
	border-right-width:50px;
	border-right-style:groove;
	border-bottom-color:orange;
	border-bottom-width:50px;
	border-bottom-style:groove;
	border-left-color:blue;
	border-left-width:50px;
	border-left-style:groove;
	
}
</style>
</head>
<body>
<div class="box">
		<ul class="list">
				<li>呵呵</li>
				<li>哈哈</li>
				<li>嘻嘻</li>
				<li>嘿嘿</li>
				<li>怕怕啊啪啪啪啪</li>
		</ul>
</div>
<br/>
<div class="box1"></div>
</body>
</html>
